<template>
  <scroll-view scroll-y class="edit-container">
    <view class="form-content">
      <u-form :model="formData" ref="form" :rules="rules" label-width="80" style="border-radius: 12rpx;
    padding: 10rpx;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.2);">
        <!-- 基本信息 -->
        <view class="section-card">
          <view class="section-title">基本信息</view>
          
          <u-form-item label="门店名称" prop="mchName" required>
            <u-input v-model="formData.mchName" placeholder="请输入门店名称"></u-input>
          </u-form-item>

          <u-form-item label="所属部门" prop="deptId" required>
            <u-input v-model="formData.deptName" placeholder="请选择所属部门" disabled @click="showDeptPicker = true"></u-input>
          </u-form-item>

          <u-form-item label="联系人" prop="director" required>
            <u-input v-model="formData.director" placeholder="请输入联系人姓名"></u-input>
          </u-form-item>

          <u-form-item label="手机号码" prop="phone" required>
            <u-input v-model="formData.phone" placeholder="请输入手机号码"></u-input>
          </u-form-item>
        </view>

        <!-- 地址信息 -->
        <view class="section-card">
          <view class="section-title">地址信息</view>
          
          <u-form-item label="所在地区" required>
            <view class="area-select">
              <u-input
                v-model="formData.provinceName"
                placeholder="省份"
                disabled
                @click="showProvince = true"
              ></u-input>
              
              <u-input
                v-model="formData.cityName"
                placeholder="城市"
                disabled
                @click="showCity = true"
              ></u-input>
              
              <u-input
                v-model="formData.districtName"
                placeholder="区县"
                disabled
                @click="showDistrict = true"
              ></u-input>
            </view>
          </u-form-item>

          <u-form-item label="详细地址" prop="mchAddr" required>
            <u-input v-model="formData.mchAddr" type="textarea" placeholder="请输入详细地址"></u-input>
          </u-form-item>
        </view>

        <!-- 图片上传 -->
        <view class="section-card">
          <view class="section-title">上传图片</view>
          
          <!-- 主��上传 -->
          <u-form-item label="上传主图" required>
            <view class="upload-box">
              <image 
                v-if="formData.mainPicUrl" 
                :src="formData.mainPicUrl" 
                mode="aspectFill" 
                class="preview-image"
                @click="previewImage([formData.mainPicUrl])"
              ></image>
              <view v-else class="upload-btn" @click="chooseMainImage">
                <u-icon name="camera" size="40" color="#999"></u-icon>
                <text>选择图片</text>
              </view>
            </view>
          </u-form-item>

          <!-- 轮播图上传 -->
          <u-form-item label="上传轮播图" required>
            <view class="upload-content">
              <view class="image-list">
                <view 
                  class="image-item" 
                  v-for="(item, index) in formData.scrollPicUrls" 
                  :key="index"
                >
                  <image 
                    :src="item" 
                    mode="aspectFill"
                    @click="previewImage(formData.scrollPicUrls, index)"
                  ></image>
                  <view class="delete-btn" @click="deleteImage(index)">
                    <u-icon name="close" color="#fff" size="24"></u-icon>
                  </view>
                </view>
                <view 
                  class="upload-btn" 
                  @click="chooseImage" 
                  v-if="formData.scrollPicUrls.length < 5"
                >
                  <u-icon name="camera" size="40" color="#999"></u-icon>
                  <text>上传图片</text>
                </view>
              </view>
              <text class="upload-tip" style="color: grey;font-size: 24rpx;">最多上传5张图片</text>
            </view>
          </u-form-item>
        </view>
      </u-form>
    </view>

    <!-- 底部按钮 -->
    <view class="bottom-btns">
      <u-button type="primary" @click="submitForm">保存</u-button>
    </view>

    <!-- 选择器 -->
    <u-picker
      :show="showProvince"
      :columns="[provinceList]"
      @confirm="onProvinceConfirm"
      @cancel="showProvince = false"
    ></u-picker>
    <u-picker
      :show="showCity"
      :columns="[cityList]"
      @confirm="onCityConfirm"
      @cancel="showCity = false"
    ></u-picker>
    <u-picker
      :show="showDistrict"
      :columns="[districtList]"
      @confirm="onDistrictConfirm"
      @cancel="showDistrict = false"
    ></u-picker>
    <u-picker
      :show="showDeptPicker"
      :columns="[deptList]"
      @confirm="onDeptConfirm"
      @cancel="showDeptPicker = false"
    ></u-picker>
  </scroll-view>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        id: '', // 门店ID
        mchName: '', // 门店名称
        deptId: '', // 部门ID
        deptName: '', // 部门名称
        director: '', // 联系人
        phone: '', // 手机号码
        provinceName: '', // 省份名称
        provinceCode: '', // 省份编码
        cityName: '', // 城市名称
        cityCode: '', // 城市编码
        districtName: '', // 区县名称
        districtCode: '', // 区县编码
        mchAddr: '', // 详细地址
        mainPicUrl: '', // 主图
        scrollPicUrls: [] // 轮播图
      },
      
      // 选择器数据
      provinceList: [],
      cityList: [],
      districtList: [],
      deptList: [],
      
      // 选择器显示控制
      showProvince: false,
      showCity: false,
      showDistrict: false,
      showDeptPicker: false,
      
      rules: {
        mchName: [{
          required: true,
          message: '请输入门店名称'
        }],
        deptId: [{
          required: true,
          message: '请选择所属部门'
        }],
        director: [{
          required: true,
          message: '请输入联系人姓名'
        }],
        phone: [{
          required: true,
          message: '请输入手机号码'
        }, {
          validator: (rule, value, callback) => {
            return this.$u.test.mobile(value)
          },
          message: '手机号码格式不正确'
        }],
        mchAddr: [{
          required: true,
          message: '请输入详细地址'
        }]
      }
    }
  },
  onLoad(options) {
    if(options.type === 'edit') {
      // 从 storage 获取编辑数据
      const editData = uni.getStorageSync('storeInfo')
	  console.log('editData')
	  console.log(editData.mchName)
      if(editData) {
        this.formData = {
          ...this.formData,
          ...editData
        }
		console.log('formData')
		console.log(formData.mchName)
        // 如果有地区数据,加载对应的城市和区县列表
        if(this.formData.provinceCode) {
          this.getCityList(this.formData.provinceCode)
        }
        if(this.formData.cityCode) {
          this.getDistrictList(this.formData.cityCode)
        }
      }
    }
    // 获取部门列表和省份列表
    //this.getDeptList()
    //this.getProvinceList()
  },
  methods: {
    // 选择主图
    chooseMainImage() {
      uni.chooseImage({
        count: 1,
        success: (res) => {
          const tempFilePaths = res.tempFilePaths
		  //发送HTTP请求将用户选择的图片上传到服务器_未完成
          uni.uploadFile({
            url: '/system/upload/image',
            filePath: tempFilePaths[0],
            name: 'file',
            success: (uploadRes) => {
              const data = JSON.parse(uploadRes.data)
              if(data.code === 200) {
                this.formData.mainPicUrl = data.url
              }
            }
          })
        }
      })
    },
    
    // 预览图片
    previewImage(urls, current = 0) {
      uni.previewImage({
        urls: urls,
        current: current
      })
    },
    
    // 部门选择
    onDeptConfirm(e) {
      const item = this.deptList[e.value[0]]
      this.formData.deptId = item.value
      this.formData.deptName = item.label
      this.showDeptPicker = false
    },
    
    // 其他方法保持不变...
  }
}
</script>

<style lang="scss" scoped>
.edit-container {
  height: 100vh;
  background: #f5f5f5;
}

.form-content {
  padding: 20rpx;
  padding-bottom: 180rpx;
}

.section-card {
  background: #fff;
  border-radius: 8rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  
  .section-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    padding: 20rpx;
    border-bottom: 1px solid #eee;
    margin-bottom: 20rpx;
  }
}

.area-select {
  display: flex;
  gap: 20rpx;
  
  .u-input {
    flex: 1;
  }
}

.upload-box {
  width: 200rpx;
  height: 200rpx;
  
  .preview-image {
    width: 100%;
    height: 100%;
    border-radius: 8rpx;
  }
  
  .upload-btn {
    width: 100%;
    height: 100%;
    border: 2rpx dashed #ddd;
    border-radius: 8rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #fafafa;
    
    text {
      font-size: 24rpx;
      color: #999;
      margin-top: 10rpx;
    }
  }
}

// 其他样式保持不变...
</style>